<template>
	<div class="lll">
		<div class="login">
			<div class="login1">
				<p>后台管理</p>
			</div>
			<div class="login2">
				<input type="text" placeholder="用户名" v-model="user.username" />
				<input type="password" placeholder="密码" v-model="user.password" />
				<input type="text" placeholder="验证码" style="width: 50%; margin-top: 15px;" /> 0000
				<button @click="login()">登录</button>
			</div>
		</div>

	</div>
	</div>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	export default {
		name: 'login',

		data() {
			return {
				user: {}
			}
		},
		methods: {
			...mapActions('search', ['addUser']),
			login() {
				this.$postkv("/api/login", this.user).then((resp) => {
					console.log(resp.data);
					console.log(resp.data.data.token);
					window.localStorage.setItem("token", resp.data.data.token);

					console.log("照片" + resp.data.data.img);
					console.log(resp.data.data);
					this.userInfo();
					this.$message({
						showClose: true,
						message: '登录成功'
					});


				})
			},
			userInfo() {
				this.$get("/api/user/info").then((resp) => {
					let u = {
						name: resp.data.data.name,
						pic: resp.data.data.img,
						role: resp.data.data.role,
					};
					console.log(u);
					this.addUser(u);
					window.localStorage.setItem("pic", resp.data.data.img);
					console.log("照片" + resp.data.data.img);
					console.log('职业' + resp.data.data.role);
					window.localStorage.setItem("name", resp.data.data.name);
					console.log("名字" + resp.data.data.name);
					if (resp.data.data.role == "adm") {
						this.$router.push(`/bookbackend`);
					} else {
						this.$router.push({
							path: '/home',
							query: {
								jd: true,
								admin: resp.data.data.name
							}
						});
					}

				})
			}
		}
	}
</script>

<style>
	.login {
		border-radius: 8px;
		width: 400px;
		height: 450px;
		background-color: orange;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.login1 {
		width: 375px;
		height: 60px;
		background-color: #189f92;
		/* margin:  auto; */
		position: absolute;
		top: 50px;
		left: -18px;
		right: 0;
		bottom: 0;
	}

	.login1 p {
		color: white;
		font-size: 18px;
		margin-left: 60px;
	}

	.login2 {
		width: 78%;
		height: 260px;
		/* background-color: aqua; */
		margin: auto;
		position: absolute;
		top: 80px;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.login2 input {
		border: 2px #c9c9ca solid;
		border-radius: 5px;
		padding-left: 20px;
		width: 92%;
		height: 18%;
	}

	.login2 input[type="password"] {
		margin-top: 15px;
	}

	.login2 button {
		width: 100%;
		margin-top: 20px;
		height: 45px;
		background-color: #189F92;
		border: none;
		border-radius: 3px;
		color: white;
		font-size: 15px;
	}
</style>